<template>
  <div class="articleBody">
    <!-- 加载开始 -->
    <div class="loadStart" v-if="loading">
      <van-loading color="#1989fa" />
      <p>加载中</p>
    </div>
    <!-- 加载完成 -->
    <div v-else-if="articleInfo.title">
      <!-- <button @click="$router.push('/article/7866')">跳转</button> -->
      <div>
        <h1>{{articleInfo.title}}</h1>
        <van-cell class="user">
          <div class="author" slot="title">
            <div class="ava">
              <img :src="articleInfo.aut_photo" alt="">
            </div>
            <div class="info">
              <span class="authorName">{{articleInfo.aut_name}}</span>
              <span class="time">{{articleInfo.pubdate | dateFormat}}</span>
            </div>
        </div>
        <!-- 关注与取消关注 -->
        <!-- 
          组件的v-model ：传到子组件中的props是value值，事件为input
          value:articleInfo.is_followed
          input => updateFollowed,将第一个参数传进来等于value传出去的父组件的值
        -->
        <FocusOrBlur 
        v-model="articleInfo.is_followed" 
        slot="default" 
        :aurId="articleInfo.aut_id"
        />
      </van-cell>
      <!-- 文章内容 -->
      <div v-html="articleInfo.content" class="content markdown-body" ref="content"></div>
      <van-divider>正文结束</van-divider>
      </div>
      <!-- 评论模块 -->
      <article-comment 
      class="allComment"
      :sourceId="articleInfo.art_id"
      @getCommentInfo="commentCount=$event.total_count"  
      :commentInfo="commentInfo"
      @clickReplay="$emit('clickReplay',$event)"
      />
      <!-- 底部 -->
      <div class="articleFooter">
        <van-button 
        type="default" 
        class="writeCom"
        @click="isShow = true"
        >写评论</van-button>
        <!-- 点赞 -->
        <Like 
        v-model="articleInfo.attitude" 
        :art_id="articleInfo.art_id"
        />  
        <van-badge 
        :content="commentCount" 
        color="#e63f31"    
        >
          <van-button icon="comment-o" @click="scrollToComment"/>
        </van-badge>
        <!-- <van-badge :content="5">
          <van-button icon="comment-o"/>
        </van-badge> -->
        <!-- 收藏 -->
        <Collect 
        v-model="articleInfo.is_collected"
        :art_id="articleInfo.art_id"
        />
        <van-button icon="share-o"/>
      </div>
      <!-- 点击评论弹出弹出框 -->
      <van-popup 
      v-model="isShow"
      position="bottom"
      >
        <PublishComment 
        v-if="isShow"
        :target="articleInfo.art_id"
        @loadSuccess="getComment"
        />
      </van-popup>
    </div>
    <!-- 资源加载失败 404 -->
    <div class="loadStart" v-else-if="(errorStatus === 404)">
      <van-icon name="info-o" size="40"/>
      <p>资源不存在或已删除</p>
    </div>
    <!-- 资源加载失败，请重试 -->
    <div class="loadStart" v-else>
      <van-icon name="info-o" size="40"/>
      <van-button plain type="info" @click="getArtcles">请点击重新加载资源</van-button>
    </div>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
import {getArticleAPI, onBlurAurAPI,onFocusAurAPI} from '@/api'
import { ImagePreview } from 'vant';
import FocusOrBlur from '@/components/FoucusOrBlur'
import Like from '@/components/Like'
import Collect from '@/components/Collect'
import ArticleComment from './ArticleComment.vue';
import PublishComment from './PublishComment.vue'

export default {
  name: 'ArticleContent',
  components: {
    FocusOrBlur,
    Like,
    Collect,
    ArticleComment,
    PublishComment
  },
  props: {
    articleId: {
      type: [Number,String],
      required: true
    }
  },
data(){
  return {
    articleInfo: {},
    loading: true,
    errorStatus: 0,
    focusStatus: false,
    value: '',
    commentCount: '',
    isShow: false,
    commentInfo: []
  }
},
computed: {
  // ...mapState(['articleId'])
},
methods: {
  async getArtcles(){
    //重新加载数据，则将loading置初始值
    this.loading = true
    try {
      const {data:{data}} = await getArticleAPI(this.articleId)
      this.articleInfo = data
      //获取内容中的所有img标签
      // console.log(this.articleInfo.content);
      // setTimeout(()=>{console.log(this.$refs.content)},0)
      // this.$nextTick(()=>{console.log(this.$refs.content);})
      setTimeout(()=>{this.getAllImage()},0)
    } catch (error) {
      console.log(error);
        if(error.response.status === 404){
          this.errorStatus = 404
        }
    }
      //数据加载完成，将加载状态置为false
      this.loading = false
      // this.$nextTick(()=>{console.log(this.$refs.content);})
  },
  //获取内容中的所有图片
  getAllImage(){
        //判断内容中是否存在图片
        // console.log(this.$refs.content);
    if(this.$refs.content.querySelectorAll('img')){
      const img = this.$refs.content.querySelectorAll('img')
      //保存图片的地址
      const images = []
      img.forEach((ele,index) => {
        images.push(ele.src)
        ele.onclick = ()=>{
          ImagePreview({
          images,
          startPosition: index,})
        }
      })
    }    
  },
  getCommentInfo(val){
    this.commentCount = val.total_count
  },
  getComment(obj){
    //追加数据
    this.commentInfo.unshift(obj.new_obj)
    //关闭弹层
    this.isShow = false
    //将评论数加1
    this.commentCount++
  },
  //点击评论按钮，跳转到评论区域
  scrollToComment(){
    const allComment = document.querySelector('.allComment')
    //元素距离可视窗口顶部的距离
    let top = allComment.getBoundingClientRect().top
    let html = document.documentElement
    let scrollTop = html.scrollTop
    //如果这个元素距离顶部的距离小于页面的高度，则不需要进行跳转
    if(top > html.clientHeight){
      html.scrollTo(0,top + scrollTop )
    }
  }
},
created() {
  this.getArtcles()
},
mounted(){
},
watch:{
  // 监听路由
  /* $route(){
    // console.log(this.$router.params.articleId);
    this.getArtcles()
  } */
},
destroyed(){
  // console.log('销毁了',this.$route.params.articleId);
}
}
</script>

<style scoped lang="less">
@import './github-markdown.css';
.articleBody{
  margin: 92px 0 88px;
  padding: 20px 29px;
  background-color: #fff;
  h1 {
    font-size: 40px;
    color: #3a3a3a;
    font-weight: 700;
  }
  .user {
    margin-top: 20px;
    .van-cell::after{
      border-bottom: unset;
    }
  }
  .author {
    display: flex;
    height: 70px;
    align-items: center;
    .ava {
      border-radius: 50%;
      overflow: hidden;
      width: 70px;
      height: 70px;
    }
    .info {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-left: 17px;
      font-size: 24px;
      height: 70px;
      color: #333;
      .authorName,.time{
        height: 50%;
      }
      .time{
        color: #b7b7b7;
      }
    }
  }
  /deep/.van-cell__value{
      .van-button{
        width: 171px;
        height: 58px;
      }
  }  
  .content {
    width: 100%;
    font-size: 34px;
    color: #333;
    margin-top: 30px;
  }
  .loadStart{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    p,button{
      margin-top: 40px;
      font-size: 30px;
    }
  }
  .articleFooter{
  position: fixed;
  display: flex;
  bottom: 0;
  left: 0;
  right: 0;
  height: 88px;
  border-top: 1px solid #d8d8d8;
  box-sizing: border-box;
  background-color: #fff;
  padding: 0 29px;
  align-items: center;
  justify-content: space-around;
  .writeCom {
    width: 282px;
    height: 46px;
    border-radius: 23px;
  }
  /deep/.van-badge__wrapper{
    height: 100%;
    .van-badge--fixed{
      top: 24px;
    }
  }
  /deep/ .van-button{
    border: unset;
    font-size: 40px;
    color: #777;
    &.writeCom{
      padding-left: 26px;
      font-size: 30px;
      color: #a7a7a7;
      .van-button__content{
        justify-content: flex-start;
      }
    }
  }
  .van-button--normal{
    padding: unset;
  }
  }
}
</style>